{% load staticfiles %}

<!DOCTYPE html>
<html>
<head>
  <title>
    Process
  </title>
  <script type='text/javascript' src='{% static 'js/input1.js' %}'></script>
  <script type='text/javascript' src='{% static 'js/display1.js' %}'></script>
  <link rel="stylesheet" href='{% static 'css/demo1.css' %}'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>


<body style="padding:10px;">
  <div class="panel panel-primary">
      <div class="panel-heading"><h1 style="text-alig
        var text = JSON.strn:center;">
        MultiLevel Queue Scheduling
      </h1></div>
  <div class="panel-body">

    <div id="output">
    </div>

    <div class="card" style="height:70px;">
        <div style="width:250px;float:left;text-align:left;">
          Enter arrival time:
          <input style="width:200px;"id="newarrivaltime" class="form-control" type="text" value=""></input>
        </div>
        <div style="width:300px;float:left;text-align:left;">
          Enter burst time:
          <input style="width:200px;float:left;" id="newbursttime" class="form-control" type="text" value=""></input>
        </div>
        <div style="width:300px;float:left;text-align:left;">
          Enter Priority:
                  <br>
                      <select class="form-control" id="sel1" style="width:200px;">
                        <option>Foreground Process(1)</option>
                        <option>Background Process(0)</option>
                      </select>
                  </div>
          <button class="btn btn-success" onclick="addToList()" style="float:left;margin-top:20px;margin-left:10px;">Add</button>
        </div>
    </div>

    <div class="panel-footer" style="height:50px;">
      <button style="float:right;" id="sender" class="btn btn-primary">Send the entire data</button>
    </div>
  </div>
  <div class="panel panel-success">
    <div class="panel-heading">
      <h3>
      Gantt chart
    </h3>
    </div>
    <div id="gantth"></div>
    <br><br>
    <div id="outer-div">
  </div>
    <br><br>
</div>


 <div class="panel panel-primary">
  <div class="panel-heading">
    <h3>Queue Status</h3>
  </div>
    <div class="panel-content" id="qstat" style="padding:10px;text-align:left;">
    </div>
  </div>


  <div class="panel panel-warning" style="width:50%;float:left;">
  <div class="panel-heading">
    <h3>Operations Taking Place</h3>
  </div>
  <div id="comments" class="panel-content">
  </div>
</div>
  <div class="panel panel-warning" style="width:50%;float:left;">
  <div class="panel-heading">
    <h3>Table</h3>
  </div>
    <div class="panel-content">
  <table id="ptab" class="table table-bordered">
  <thead>
  <tr id="thead">
  <th>PNO.</th>
  <th>Priority</th>
  <th>Arrival time</th>
  <th>Burst time</th>
  <th>Completion time</th>
  <th>Waiting time</th>
  <th>Turn-around time</th>
  </tr>
  <tbody id="ptable">

  </tbody>
  </thead>
  </table>
    </div>
    </div>
</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">

//result queues , gantt,table
    function displayQueue(){
	// qstat = [{'FQ':[1,2,3,4,5],'BQ':[2,3]},{'FQ':[1,2],'BQ':[2,3]},{'FQ':[1,3],'BQ':[2]}]
	var i;
  var output = document.getElementById("qstat");
  output.setAttribute("style","height:"+150*qstat.length+"px;padding:10px;");
	for(i=0;i<qstat.length;++i){
    var card = document.createElement("div");
    card.insertAdjacentHTML( 'beforeend', "<h4>t = "+qstat[i].time+"</h4><hr style='border-top: 1px solid #3c763d;'>" );
    card.setAttribute("style","text-align:center");
    var lcard = document.createElement("div");
    lcard.setAttribute("id","lqstat"+i);
    lcard.setAttribute("style","float:left;width:50%;;height:80px");

    var rcard = document.createElement("div");
    rcard.setAttribute("id","rqstat"+i);
    rcard.setAttribute("style","float:right;width:50%;height:80px");
    lcard.insertAdjacentHTML( 'beforeend', "<div style='float:left;'>Foreground : </div>" );

		var j;
		for(j=0;j<qstat[i]['FQ'].length;++j){
      lcard.insertAdjacentHTML( 'beforeend', "<div style='height:50px;width:50px;text-align:center;float:left;border-style: dotted;'>" + qstat[i]['FQ'][j] + "</div>" );

			// $("#lqstat"+i).append("<div style='height:50px;width:50px;text-align:center;float:left;border-style: dotted;'>" + qstat[i]['FQ'][j] + "</div>");
		}
    rcard.insertAdjacentHTML( 'beforeend', "<div style='float:left;'>Background : </div>");

		// $("#rqstat"+i).append("<br><br><br><div style='float:left;'>Background : </div>");
		var j;
		for(j=0;j<qstat[i]['BQ'].length;++j){
      rcard.insertAdjacentHTML( 'beforeend', "<div style='height:50px;width:50px;text-align:center;float:left;border-style: dotted;'>" + qstat[i]['BQ'][j] + "</div>");
		}

    card.appendChild(lcard);
    card.appendChild(rcard);
    output.appendChild(card)
    console.log(output);

    card.insertAdjacentHTML( 'beforeend', "<hr style='border-top: 1px solid #3c763d;'>")
	}
    }

    $('#sender').click(function(){
    var text = JSON.stringify(stuff);
    var alg = JSON.stringify("MULTIQ");
    var mytq = JSON.stringify(2);
    //console.log(text);
    console.log({value:text, algo:alg})
    $.post('/process/gateway/',{value:text, algo:alg, tq:mytq}, function(result){
      console.log(result);
      sequence = result["gantt"];
      a = result["table"]
      qstat = result["queues"];

      avgwt =0;
      avgtat =0;
      for(i=0;i<a.length;++i){
        avgwt += a[i].wt;
        avgtat += a[i].tat;
      }


      total = sequence.length;

      var new_sequence = []
      if(sequence[0].start!=0) new_sequence.push({start:0,stop:sequence[0].start,no:-1,type:"IDLE"});

      new_sequence.push(sequence[0])

      for(i=1;i<total;i++){
        if(sequence[i].start!=sequence[i-1].stop)
          new_sequence.push({start:sequence[i-1].stop,stop:sequence[i].start,no:-1,type:"IDLE"});
        new_sequence.push(sequence[i]);
      }

      sequence = new_sequence;
      total = sequence.length;

      console.log(qstat);
      total = sequence.length;
      pixel = 0;
      i = 0;
      $('#outer-div,#comments,#ptable,#qstat,#gantth').empty();
      // $('#thead').append('<th>PNO.</th> <th>Arrival time</th>  <th>Burst time</th>  <th>Completion time</th>  <th>Waiting time</th>  <th>Turn-around time</th>');
      totalTime = sequence[total-1].stop;
      pixel = parseInt(800/totalTime);
      containerWidth = pixel*totalTime + 2;
      $('#outer-div').css('width',containerWidth+'px');
      displayBlock(i);
      displayQueue();

    });
    });
</script>
